<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Real Estate Builders Free Responsive Website Templates - icon">
	<meta name="author" content="webThemez.com">
	<title>欢迎来到拴马桩</title>
	<link rel="favicon" href="assets/images/favicon.png">
	<link rel="stylesheet" media="screen" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/css/font-awesome.min.css">
	<link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
	<link rel="stylesheet" type="text/css" href="assets/css/isotope.css" media="screen" />
	<link rel="stylesheet" href="assets/js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="assets/css/style.css">
	<script src="assets/js/html5shiv.js"></script>
	<script src="assets/js/respond.min.js"></script>
	<link rel="shortcut icon" href="Imperial/assets/img/logo.php">
	<link href="assets/css/detail.css" rel="stylesheet">
	<link href="assets/css/personalDetail.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script th:src="@{/webjars/jquery/3.6.0/dist/jquery.js}"></script>
	<link rel="stylesheet" type="text/css" href="assets/css/ShoppingCart.css"/>
	<link rel="stylesheet" th:href="@{/webjars/layui/2.5.7/css/layui.css}">
	<script th:src="@{/webjars/layui/2.5.7/layui.js}"></script>
</head>

<body>
<!-- Fixed navbar -->
<div th:replace="~{commons/commons::topbar(active='contact')}"></div>
<!-- /.navbar -->

<header id="head" class="secondary">
	<div class="container">
		<div class="row">
			<div class="col-sm-8">
				<h1>Our Projects</h1>
			</div>
		</div>
	</div>
</header>
<br>
<br>
<div th:replace="~{commons/commons::menunav(selected='contact')}"></div>
<div id="app" style="height: 600px">
<div class="container" v-if="productList.length!==0">
	<table class="tab" width="100%" border="0" cellspacing="0" cellpadding="0">
		<thead>
		<tr>
			<th>城市</th>
			<th >地址</th>
			<th >编号</th>
		</tr>
		</thead>
		<tbody>
		<tr v-for="item in productList">
			<td>
					<p>{{item.city}}</p>
			</td>
			<td>{{item.address}}</td>
			<td class="num">
				{{item.number}}
			</td>
		</tr>
		</tbody>
	</table>
</div>
<div v-else>
	<h2 align="center" ><br><br><br>您还没有购买车位</h2>
</div>
</div>
<footer id="footer">

	<div class="footer2">
		<div class="container">
			<div class="row">

				<div class="col-md-6 panel">
					<div class="panel-body">
						<p class="simplenav">
<!--							<a href="index.html">Home</a> |-->
<!--							<a href="about.html">About</a> |-->
<!--							<a href="services.html">Services</a> |-->
<!--							<a href="price.html">Price</a> |-->
<!--							<a href="projects.html">Projects</a> |-->
<!--							<a href="contact.html">Contact</a>-->
						</p>
					</div>
				</div>

				<div class="col-md-6 panel" >
					<div class="panel-body">
						<p class="text-right">
							Copyright &copy; 2021. Template by Shuanmazhuang
						</p>
					</div>
				</div>

			</div>
			<!-- /row of panels -->
		</div>
	</div>
</footer>
</body>
</html>
<script>
	let vm=new Vue({
		el:'#app',
		data:{
			totalMoney:0,
			productList:[],
			checkAllFlag:false
		},
		created:function(){
			this.cartView();
		},
		methods:{
			cartView:function () {
				let _this=this;
				$.ajax({
					url:'/pps',
					success:function (res) {
						_this.productList=res;
					}
				})
			},
			//鐐瑰嚮澧炲姞鎴栧噺灏戝晢鍝佹暟閲忔寜閽悗淇敼瀵瑰簲閲戦
			changeMoney:function (product,way) {
				if (way>0) {
					product.productQuentity++;
				}else{
					product.productQuentity--;
					if (product.productQuentity<1) {
						product.productQuentity=1;
					}
				}
				this.getTotalMoney();
			},
			//鍗曢€夋璁剧疆
			checkBox:function (item){
				let _this=this;
				let num=0;
				if (typeof item.check == "undefined") {
					this.$set(item,"check",true);
				}else{
					item.check = !item.check;
				}
				this.productList.forEach(function (item,value) {
					if (item.check) {
						num++;
					}
				})
				if (num==_this.productList.length) {
					this.checkAllFlag=true;
				}else{
					this.checkAllFlag=false;
				}
				this.getTotalMoney();
			},
			//鍏ㄩ€夋寜閽缃�
			checkAll:function (){
				var _this=this;
				this.checkAllFlag = !this.checkAllFlag;
				this.productList.forEach(function(item,index){
					if (typeof item.check == "undefined") {
						_this.$set(item,"check",_this.checkAllFlag);
					}else{
						item.check = _this.checkAllFlag;
					}
				})
				this.getTotalMoney();
			},
			//鎬婚噾棰濊缃�
			getTotalMoney:function () {
				var _this=this;
				this.totalMoney = 0;
				this.productList.forEach(function (item,index) {
					if (item.check) {
						let num=item.price*1;
						_this.totalMoney += num;
					}
				})
			},
			//鍒犻櫎鍟嗗搧
			del: function (item) {
				let b = confirm("是否取消预定");
				if (b==true){
					let index=this.productList.indexOf(item);
					this.productList.splice(index,1);
					this.getTotalMoney();
					$.ajax({
						url:'/deleteReserve',
						data:{
							'parkingid':item.id
						},
						success:function (res) {
							layui.use('layer',function () {
								if (res=='1'){
									layer.msg("取消成功");
								}else {
									layer.msg("取消失败");
								}
							})
						}
					})
				}
			}
		}
	})
</script>
